 <template>
  <div class="index-box" ref="index">

          <div  ref="search" style="display: flex;justify-content: end;">
            <el-select v-model="year" placeholder="请选择年份" size="small" style="width:100px" clearable @change="dataInfo()">
                <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-select v-model="month" placeholder="请选择月份" size="small" style="width:100px" clearable @change="dataInfo()">
                <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </div>
          <div id="echart" ref="echart"></div>
          <div class="moneyTotal" ref="moneyTotal">

              <div class="item">
                <div class="money">¥{{topData.platformSalesTotalAmount}}</div>
                <div class="text">平台销售总金额({{unit}})</div>
              </div>
              <div class="item">
                <div class="money">￥{{topData.cloudGoodsTotalAmount}}</div>
                <div class="text">云仓商品总金额({{unit}})</div>
              </div>
              <div class="item">
                <div class="money">￥{{topData.platformTotalProfit}}</div>
                <div class="text">平台总收益({{unit}})</div>
              </div>
          </div>
          <div class="export" ref="export" style="display: flex;justify-content: end;padding-bottom: 10px;">
            <el-button
              type="primary"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
              @click="handleExport"
            >导出</el-button>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;" :height="tableHeight" border v-loading="loading" stripe>
              <el-table-column prop="dataDate" :label="date=='month'?'数据日期':'数据月份'" align="center"/>
              <el-table-column prop="platformSalesAmount" :label="'平台销售订单合计金额('+unit+')'" align="center"/>
              <el-table-column prop="cloudGoodsAmount" :label="'云仓销售订单合计金额('+unit+')'" align="center"/>
              <el-table-column prop="platformProfit" :label="'平台收益('+unit+')'" align="center"/>
            </el-table>
          </div>
          <!-- <div class="page" ref="page">
           <MyPagination
              :total="total"
              :page.sync="searchForm.pageNum"
              :limit.sync="searchForm.pageSize"
              @pagination="dataInfo"
            />
          </div> -->

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    cloudTotalIncomeExport,getCloudTotalIncomeQuery,getCloudTotalIncomeList
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        year:'2022',
        month:'',
        searchForm: {
          date:'',
          pageNum: 1,
          pageSize: 100,
        },
        yearList:[{label:'2020年',value:'2020'},{label:'2021年',value:'2021'},{label:'2022年',value:'2022'},{label:'2023年',value:'2023'},{label:'2024年',value:'2024'},{label:'2025年',value:'2025'}],
        monthList:[{label:'1月',value:'01'},{label:'2月',value:'02'},{label:'3月',value:'03'},{label:'4月',value:'04'},{label:'5月',value:'05'},{label:'6月',value:'06'},{label:'7月',value:'07'},{label:'8月',value:'08'},{label:'9月',value:'09'},{label:'10月',value:'10'},{label:'11月',value:'11'},{label:'12月',value:'12'}],
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        topData:{},
        unit:'元',
        date:'year'
      }
    },
    created() {

    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.moneyTotal.offsetHeight - this.$refs.search.offsetHeight - this.$refs.echart.offsetHeight  - 100;

      })
    },
    methods: {
      playCharts(xData,yData) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('echart'));
        let title = (this.unit == '万元'?'云仓总收益(年)':'云仓总收益(月)')
        // 绘制图表
        myChart.setOption({
             title: {
               text: title,
                x:'center',
                y:'top',
               textAlign:'center'
             },
             tooltip: {
               trigger: 'axis'
             },
             legend: {
               data: ['Email'],
               top: 'bottom',
             },
             grid: {
               left: '3%',
               right: '4%',
               bottom: '10%',
               containLabel: true
             },
             toolbox: {

             },
             xAxis: {
               type: 'category',
               boundaryGap: false,
               data: xData
             },
             yAxis: {
               type: 'value'
             },
             series: [
               {
                 name: '总收益',
                 type: 'line',
                 stack: 'Total',
                 data: yData
               }
             ]
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        if(this.month){
          this.searchForm.date = this.year+'-'+this.month;
          this.unit = '元'
        }else{
           this.searchForm.date = this.year
           this.unit = '元'
        }
        this.$modal.confirm('是否确认导出所有用户数据项？').then(() => {
          this.btnLoading = true;
          return cloudTotalIncomeExport(this.searchForm);
        }).then(response => {
          console.log(response.msg)
          this.$download.name(response.msg);
          this.btnLoading = false;
        }).catch(() => {});
      },
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          this.loading = true;
          if(this.month){
            this.searchForm.date = this.year+'-'+this.month;
            this.date = 'month'
            this.unit = '元'
          }else{
             this.searchForm.date = this.year;
             this.date = 'year'
             this.unit = '元'
          }
          const result = await getCloudTotalIncomeList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;

            let xData = [];
            let yData = [];
            for(let i=0;i<result.rows.length;i++){
              xData.push(result.rows[i].dataDate);
              yData.push(result.rows[i].cloudGoodsAmount);
            }
            this.playCharts(xData,yData);
          } else {
            this.$message.error(result.message);
          }

          const result1 = await getCloudTotalIncomeQuery(this.searchForm);
          if (result1.code == 200) {
            this.topData = result1.data;
          } else {
            this.$message.error(result1.message);
          }

          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      }
    }
  }
</script>

<style scoped lang="scss">

  #echart{
    width:100%;
    height:400px;
    margin-bottom:15px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
